<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<link href="<%=path%>/res/css/userMenu.css" rel="stylesheet" type="text/css" />
<style>
    .collection {
        margin: 0.5rem 0 1rem 0;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
        position: relative;
        width: 260px;
    }
    .loct{
        width: 70px;
        height: 70px;
        padding: 3px;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        bottom: 90px;
        left: 50%;
        margin-left: -40px;
        position:absolute;z-index:1;
    }
    .lay{
        position:absolute;z-index:0;
    }
    .card .card-image .card-title {
        color: #fff;
        position: absolute;
        bottom: 45;
        padding: 60 0 30 93px;
    }
    .ran{
        background-color: rgb(238,110,115) !important;
    }
    .wid{
        width: 300px;
    }
</style>
<script>
    $(function () {
        if (${user.message} != 0)
        {
            $('#related').html(${user.message});
        }
        else{
            $('#related').hide();
        }
        var param = "uid=${user.id}";
        $.ajax({
            type : "POST",
            url : "<%=path%>/user/getCardInfo",
            data : param,
            dateType : "text",
            success : function(result) {
                $.each( JSON.parse(result), function(index, content){

                    $('#digit'+index).html(content);
                });
            }
        });


    });
</script>
<%--3 start--%>
<div class="col s3">
    <div class="row"></div>
    <%--3.1 start--%>
    <div class="row bottom0">
        <div class="col s12">
            <%--card--%>
            <div class="card small hoverable z-depth-4">
                <div class="card-image waves-effect lay waves-block waves-light">
                    <img class="activator" src="<%=path%>/res/img/2.jpg">
                    <span class="card-title activator ">${user.name}</span>
                </div>
                <div class="loct"><img src="<%=ipath%>${user.avatar}" width="70" height="70" class="circle"></div>
                <div class="card-content">

                    <ul class="user_atten clearfix W_f18" >
                        <li class="S_line1">
                            <a>
                                <strong id="digit0"></strong>
                                <span class="S_txt2">关注</span>
                            </a>
                        </li>
                        <li class="S_line1">
                            <a>
                                <strong id="digit1"></strong>
                                <span class="S_txt2">粉丝</span>
                            </a>
                        </li>
                        <li class="S_line1">
                            <a>
                                <strong id="digit2"></strong>
                                <span class="S_txt2">游记</span>
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4 flow-text">个人介绍<i class="material-icons right">close</i></span>
                    <blockquote>
                        ${user.intro}
                    </blockquote>

                </div>
            </div>
        </div>
    </div>
    <%--3.1 end--%>

    <%--3.2--%>
    <div class="row">
        <div class="col s12 wid">
            <div class="collection hoverable z-depth-4">
                <a id="m0" href="<%=path%>/article/articleInfo" class="collection-item">我的文章</a>
                <a id="m5" href="<%=path%>/user/showfriends?uid=${user.id}" class="collection-item">我的好友</a>
                <a id="m1" href="<%=path%>/act/showMyAct?uid=${user.id}" class="collection-item">我的活动</a>
                <a id="m2" href="<%=path%>/jsp/myearth.jsp" class="collection-item">我的地图</a>
                <a id="m3" href="<%=path%>/user/relatedToMe" class="collection-item">与我相关<span id="related" class="new badge ran"></span></a>
                <a id="m4" href="<%=path%>/user/editUser?uid=${user.id}" class="collection-item">完善信息</a>

            </div>
        </div>
    </div>


</div><%--3 end--%>
